<script setup lang="ts">
import {ref, onMounted, watchEffect} from 'vue';
import {getCategoryApi} from '@/api/headDetails/index';
import {useRoute} from 'vue-router';

//获取路由参数
const route = useRoute();

//定义详情数据
const categoryList = ref([]);

const getCategory = async () => {
  let res = await getCategoryApi(route.params.id)
  if (res.msg == '操作成功') {
    categoryList.value = res.result;
  }
}
watchEffect(() => {
  //如果路由参数有值，则重新获取详情数据
  if (route.params.id) {
    getCategory()
  }
})
onMounted(() => {
  getCategory()

});
</script>

<template>
  <div class="head-details-type" v-for="(item,index) in categoryList.children" :key="item.id">
    <div class="head-details-type-heart">
      <div class="hdth-title">
        <div class="hdth-title-left"></div>
        <div class="hdth-title-middle">
          <h2>- {{ item.name }} -</h2>
        </div>
        <div class="hdth-title-right">
          <span>查看全部</span>
          <i class="iconfont icon-xiangyou"></i>
        </div>
      </div>
      <div class="hdth-dace">
        <div class="hdth-dace-left"></div>
        <div class="hdth-dace-middle">
          <span>温暖柔软 品质之选</span>
        </div>
        <div class="hdth-dace-right">
          <span>查看全部</span>
          <i class="iconfont icon-xiangyou"></i>
        </div>
      </div>
      <div class="hdth-dace-list">
        <div class="hdth-dace-list-item" v-for="goodsItem in item.goods" :key="goodsItem.id">
          <div class="hdth-dace-list-item-top">
            <div class="hdth-dace-list-item-top-img">
              <img v-lazy-img="goodsItem.picture">
            </div>
          </div>
          <div class="hdth-dace-list-item-middle">
            <p>{{ goodsItem.name }}</p>
            <p>{{ goodsItem.desc }}</p>
          </div>
          <div class="hdth-dace-list-item-bottom">
            <span>￥{{ goodsItem.price }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.head-details-type {
  width: 100%;
  margin-bottom: 1.66rem;

}

.head-details-type:last-child {
  padding-bottom: 1.66rem;
  box-sizing: border-box;
}

.head-details-type-heart {
  width: var(--primary-heart-width);
  margin: 0 auto;
  background-color: #fff;
  padding: 1.66rem 1.66rem 0 1.66rem;
  box-sizing: border-box;
}

.hdth-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.hdth-title-middle h2 {
  font-size: 2.3rem;
  color: #666;
  font-weight: 400;
}

.hdth-title-right {
  font-size: 1.33rem;
  color: #999;
}

.hdth-title-right:hover {
  color: var(--primary-color);
  cursor: pointer;
}

.hdth-dace {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 1.66rem 0 4.16rem;;
}

.hdth-dace-middle span {
  font-size: 1.66rem;
  color: #999;

}

.hdth-dace-right {
  visibility: hidden;
  opacity: 0;
}

.hdth-dace-list-item-middle {
  margin-top: 0.83rem;
  width: 15rem;

}

.hdth-dace-list-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.hdth-dace-list {
  display: flex;
  padding: 0 4.16rem;
  box-sizing: border-box;

}

.hdth-dace-list-item-top-img {
  width: 100%;
}

.hdth-dace-list-item-top-img img {
  width: 100%;
}

.hdth-dace-list-item {
  padding: 1.66rem 2.5rem;
  box-sizing: border-box;
  transition: 0.5s;
}

.hdth-dace-list-item:hover {
  transform: translateY(-0.5rem);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}

.hdth-dace-list-item-middle p {
  font-size: 1.33rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hdth-dace-list-item-middle p:nth-of-type(1) {
  margin-bottom: 0.83rem;
  color: #333;
}

.hdth-dace-list-item-middle p:nth-of-type(2) {
  color: #999;
}

.hdth-dace-list-item-bottom {
  text-align: center;
}

.hdth-dace-list-item-bottom span {
  font-size: 1.66rem;
  color: #ff5a00;
}
</style>